import * as echarts from 'echarts'

/**
 * 旋转饼图
 * @param el
 * @param params
 * @author 赵京涛
 */
export const useRotatingPieChart = (el, params) => {
  const bgColors = ['rgba(92, 181, 230, 0.4)', 'rgba(4, 142, 249, 0.4)']
  const colors = ['#5CB5E6', '#048EF9']
  const names = params?.dataList.map(i => i.name)
  const bgSeriesData = []
  const seriesData = []
  const values = params?.dataList.map(i => i.num)
  names.forEach((item, index) => {
    bgSeriesData.push({
      name: item,
      value: values[index],
      itemStyle: {
        color: bgColors[index]
      }
    })
    seriesData.push({
      name: item,
      value: values[index],
      itemStyle: {
        color: colors[index]
      }
    })
  })
  let total = values.reduce((accumulator, curVal) => {
    return accumulator + curVal
  }, 0)
  const myChart = echarts.init(el)
  const option = {
    legend: {
      orient: 'vertical',
      right: '20',
      show: false,
      top: 'center',
      icon: 'roundRect',
      itemWidth: 18,
      itemHeight: 11,
      itemGap: 30,
      formatter: name => {
        const obj = params?.dataList.find(i => i.name === name) || {}
        const proportion = Number((obj.num / total) * 100).toFixed(2)
        return name + ' ' + proportion + '% ' + obj.num
      },
      textStyle: {
        color: '#000',
        fontSize: 14
      }
    },
    series: [
      {
        type: 'pie',
        radius: ['60%', '86%'],
        center: ['50%', '50%'],
        label: {
          show: false
        },
        labelLine: {
          show: false
        },
        data: seriesData
      },
      {
        type: 'pie',
        radius: ['48%', '66%'],
        center: ['50%', '50%'],
        labelLine: {
          show: false
        },
        label: {
          show: false
        },
        silent: true,
        data: bgSeriesData
      },
      {
        name: params?.showName || '',
        type: 'pie',
        radius: ['0%', '0%'],
        center: ['50%', '50%'],
        itemStyle: {
          color: 'transparent'
        },
        label: {
          position: 'inside',
          formatter: `{{data|{c}}`,
          rich: {
            data: {
              fontWeight: '600',
              fontSize: 40,
              color: `#000`,
              lineHeight: 36,
              textBorderColor: `transparent`,
              textBorderWidth: 0,
              padding: [4, 6, 4, 6]
            },
            name: {
              fontSize: 18,
              color: `#000`,
              textBorderColor: `transparent`,
              textBorderWidth: 0
            }
          }
        },
        labelLine: {
          show: false
        },
        data: [total]
      }
    ]
  }
  option && myChart.setOption(option)
}
